import { FC } from "react";
import { StatInfo } from "../../types";
import SectionHeader from "../SectionHeader";
import styles from "./index.module.less";

interface StatAnalysisProps {
  stats: StatInfo[];
  isLoading?: boolean;
}

const StatAnalysis: FC<StatAnalysisProps> = ({ stats, isLoading = false }) => {
  return (
    <div className={`${styles["stats-section"]} ${isLoading ? styles["loading"] : ''}`}>
      <SectionHeader title="统计分析" />
      <div className={styles["stats-list"]}>
        {stats.map((stat, index) => (
          <div key={index} className={`${styles["stat-item"]} ${isLoading ? styles["loading-item"] : ''}`}>
            <div className={styles["stat-name"]}>{stat.name}</div>
            <div className={styles["divider"]}></div>
            <div 
              className={styles["stat-value"]} 
              style={{color: '#15CCFF'}}
            >
              {isLoading ? '--' : `${stat.value}${stat.unit || ''}`}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StatAnalysis; 